<template>
  <div>
    <div class="app-container">
      <div class="page_header">{{ID?'编辑':'添加'}}中介人员</div>
      <el-col :span="12">
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="130px">
          <el-form-item label="登录名" prop="userName" v-if="!ID">
            <el-input v-model="formData.userName" placeholder="请输入登录系统名称" :maxlength="20" clearable :style="{width: '100%'}"></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="nickName">
            <el-input v-model="formData.nickName" placeholder="请输入中介人姓名" :maxlength="20" clearable :style="{width: '100%'}"></el-input>
          </el-form-item>
          <el-form-item label="登陆密码" prop="password" v-if="!ID">
            <el-input :type="passw" v-model="formData.password" placeholder="请输入登录系统密码" :maxlength="20" clearable :style="{width: '100%'}"> <i slot="suffix" :class="icon" @click="showPass"></i></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="passwordre" v-if="!ID">
            <el-input :type="passw" v-model="formData.passwordre" placeholder="请输入登录系统密码" :maxlength="20" clearable :style="{width: '100%'}"> <i slot="suffix" :class="icon" @click="showPass"></i></el-input>
          </el-form-item>
          <el-form-item label="身份证号" prop="cardId">
            <el-input v-model="formData.cardId" placeholder="请输入身份证号" :maxlength="18" clearable :style="{width: '100%'}"></el-input>
          </el-form-item>
          <el-form-item label="联系方式" prop="phonenumber">
            <el-input v-model="formData.phonenumber" placeholder="请输如手机号" :maxlength="11" clearable :style="{width: '100%'}"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="formData.sex">
              <el-radio label="0">男</el-radio>
              <el-radio label="1">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否禁用">
            <el-radio-group v-model="formData.status">
              <el-radio label="0">启用</el-radio>
              <el-radio label="1">禁用</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="提成比例">
            <el-input  type="text" v-model="formData.rate" placeholder="请输提成比例 例如50%" :maxlength="4" clearable :style="{width: '100%'}"></el-input>
          </el-form-item>

          <el-form-item label="开户行" prop="accountAddress">
            <el-input  type="text" v-model="formData.accountAddress" placeholder="请输入开户行" :maxlength="100" clearable :style="{width: '100%'}"></el-input>
          </el-form-item>

          <el-form-item label="银行卡号" prop="accountNumber">
            <el-input  type="text" v-model="formData.accountNumber" placeholder="请输入银行卡号" :maxlength="20" clearable :style="{width: '100%'}"></el-input>
          </el-form-item>
          <el-form-item label="开户姓名" prop="accountName">
            <el-input  type="text" v-model="formData.accountName" placeholder="请输入开户姓名" :maxlength="10" clearable :style="{width: '100%'}"></el-input>
          </el-form-item>
          <el-form-item label="预留手机号" prop="accountPhone">
            <el-input  type="text" v-model="formData.accountPhone" placeholder="请输入预留手机号" :maxlength="11" clearable :style="{width: '100%'}"></el-input>
          </el-form-item>

          <el-form-item size="large">
            <el-button type="primary" :disabled="pending" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>

        </el-form>
      </el-col>
    </div>
  </div>
</template>

<script>
  import { addAgent,getAgentDetail,updateAgent} from '@/api/agent/agent'
export default {
  name: 'Agentedit',
  components: {

  },
  data() {
    return {
      formData: {
        userName:undefined,
        nickName:undefined,
        password:undefined,
        passwordre:undefined,
        cardId:undefined,
        phonenumber:undefined,
        sex:"0",
        status:"0",
        rate:"",
        loginId:0,
        accountAddress:'',
        accountNumber:'',
        accountName:'',
        accountPhone:'',
      },
      passw:"password",
      icon:"el-input__icon el-icon-view",
      rules: {
        userName: [
          {
            required: true,
            message: '请输入中介登录名',
            trigger: 'blur'
          }
        ],accountAddress:[{
          required: true,
          message: '请输入开户行',
          trigger: 'blur'
        }],accountNumber:[{
          required: true,
          message: '请输入银行卡号',
          trigger: 'blur'
        }],accountName:[{
          required: true,
          message: '请输入开户姓名',
          trigger: 'blur'
        }],accountPhone:[{
          required: true,
          message: '请输入预留手机号',
          trigger: 'blur'
        }],
        nickName: [
          {
            required: true,
            message: '请输入中介姓名',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '请输入中介登录密码',
            trigger: 'blur'
          }
        ],
        passwordre: [
          {
            required: true,
            message: '请输入再次输入中介密码',
            trigger: 'blur'
          }
        ],
        cardId: [
          {
            pattern: /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
            required: true,
            message: '身份证号格式错误',
            trigger: 'blur'
          }
        ],
        phonenumber: [
          {
            required: true,
            pattern: /(\d{3,4}-?)?\d{7,8}|1\d{10}/,
            message: '手机号格式有误',
            trigger: 'blur'
          }
        ]
      },
      pending: false
    }
  },
  computed: {
    ID() {
      return this.$route.query.id
    }
  },
  async created() {
  },
  async mounted() {
    if (this.ID) {
      try {
        const res = await getAgentDetail(this.ID)
        console.log(res);
         const { areaList,...other } = res.data
         this.formData = Object.assign(this.formData,{ ...other })
      } catch (error) {
        console.log(error)
      }
    } else {
      this.resetForm()
    }
  },
  // 编辑类不缓存
  // async activated() {
  // },
  methods: {
    handleAreaDataAdd() {
      this.formData.areaData.push([])
    },
    showPass(){
      //点击图标是密码隐藏或显示
      if( this.passw=="text"){
        this.passw="password";
        //更换图标
        this.icon="el-input__icon el-icon-view";
      }else {
        this.passw="text";
        this.icon="el-input__icon el-icon-loading";
      };
    },
    handleAreaDataMinus(index) {
      this.formData.areaData.splice(index, 1)
    },
    submitForm() {
      this.$refs['elForm'].validate(async (valid) => {
        if (!valid) return
        if(!this.ID && this.formData.password!=this.formData.passwordre){
          this.$message.error('两次输入密码不一致！')
          return
        }
        const fetchData = {
          ...this.formData
        }
        delete fetchData.passwordre;
        this.pending = true
        try {
          const fetchFn = this.ID ? updateAgent : addAgent
          const res = await fetchFn({
            ...fetchData,
            ID: this.ID ? this.ID : undefined
          })
          if (res.code === 200) {
            this.msgSuccess(res.msg)
            this.$closeNowTagsView()
          }
        } catch (error) {
          console.log(error)
        }
        this.pending = false
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
    handleFileSuccess(response, file, fileList) {
      if (response.code !== 200) {
        const index = fileList.findIndex((per) => per.uid === file.uid)
        fileList.splice(index, 1)
        this.$message({ message: response.msg, type: 'error' })
      }
    }
  }
}
</script>

<style lang='scss'>
</style>

